<template>
	<view>
					<view class="uni-padding-wrap uni-common-mt">
						<uni-segmented-control  styleType="text" :current="current" :values="items" 
							:active-color="activeColor" @clickItem="onClickItem"  />
					</view>
					
					<view class="content">
						<view v-if="current === 0">
							<scroll-view :scroll-top="scrollTop" scroll-y="true"    style="height: 100vh;">
								<view class="historyList">
									<!--  -->
									<view class="box" v-for="item in historyList" :key="item.id"
										style="display: flex; grid-gap: 30rpx; margin-bottom: 10rpx;"  @click="goDetail(item.id,item.isCollect)">
										
										
										<view style="width: 30%;">
											<image :src="item.avatar" style="width: 100%; height: 200rpx; border-radius: 10rpx; display: block;"></image>
										</view>
										
										
										<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; grid-gap: 10rpx;">
											
										<view style="font-size: 36rpx; font-weight: bold;">{{ item.name }}</view>
									
											<view style="display: flex;  color: #666; ">
												<view style="flex: 1;">
													<text v-if="item.start !== 'NaN'" style="color: #ff9800; font-weight: bold;">{{item.start}}分</text>
													<text v-if="item.start == 'NaN'" style="color: #ff9800; font-weight: bold;">0.0分</text>
													<text style="margin-left: 10rpx;">已售{{item.count}}</text>
												</view>
												<view style="flex: 1; text-align: right;">30分钟内送达</text>
												</view>
											</view>
											
											<view style="color: #ff9800;">{{item.info}}</view>
											
											<view style="background-color: #ffd281; color: brown; border-radius: 4rpx; width: fit-content;
												padding: 0 8rpx;">{{ item.type || '商家介绍' }}</view>
									
										 </view>
									
										
										
									</view>
									<!--  -->
								</view>
							</scroll-view>	
						</view>
						<view v-if="current === 1">
							<scroll-view :scroll-top="scrollTop" scroll-y="true"    style="height: 100vh;">
								<view class="historyList">
									<!--  -->
									<view class="box" v-for="item in historyList" :key="item.id"
										style="display: flex; grid-gap: 30rpx; margin-bottom: 10rpx;"  @click="goDetail(item.id,item.isCollect)">
										
										
										<view style="width: 30%;">
											<image :src="item.avatar" style="width: 100%; height: 200rpx; border-radius: 10rpx; display: block;"></image>
										</view>
										
										
										<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; grid-gap: 10rpx;">
											
										<view style="font-size: 36rpx; font-weight: bold;">{{ item.name }}</view>
									
											<view style="display: flex;  color: #666; ">
												<view style="flex: 1;">
													<text v-if="item.start !== 'NaN'" style="color: #ff9800; font-weight: bold;">{{item.start}}分</text>
													<text v-if="item.start == 'NaN'" style="color: #ff9800; font-weight: bold;">0.0分</text>
													<text style="margin-left: 10rpx;">已售{{item.count}}</text>
												</view>
												<view style="flex: 1; text-align: right;">30分钟内送达</text>
												</view>
											</view>
											
											<view style="color: #ff9800;">{{item.info}}</view>
											
											<view style="background-color: #ffd281; color: brown; border-radius: 4rpx; width: fit-content;
												padding: 0 8rpx;">{{ item.type || '商家介绍' }}</view>
									
										 </view>
									
										
										
									</view>
									<!--  -->
								</view>
							</scroll-view>	
						</view>
						<view v-if="current === 2">
						<scroll-view :scroll-top="scrollTop" scroll-y="true"    style="height: 100vh;">
							<view class="historyList">
								<!--  -->
								<view class="box" v-for="item in historyList" :key="item.id"
									style="display: flex; grid-gap: 30rpx; margin-bottom: 10rpx;"  @click="goDetail(item.id,item.isCollect)">
									
									
									<view style="width: 30%;">
										<image :src="item.avatar" style="width: 100%; height: 200rpx; border-radius: 10rpx; display: block;"></image>
									</view>
									
									
									<view style="flex: 1; display: flex; flex-direction: column; justify-content: space-between; grid-gap: 10rpx;">
										
									<view style="font-size: 36rpx; font-weight: bold;">{{ item.name }}</view>
								
										<view style="display: flex;  color: #666; ">
											<view style="flex: 1;">
												<text v-if="item.start !== 'NaN'" style="color: #ff9800; font-weight: bold;">{{item.start}}分</text>
												<text v-if="item.start == 'NaN'" style="color: #ff9800; font-weight: bold;">0.0分</text>
												<text style="margin-left: 10rpx;">已售{{item.count}}</text>
											</view>
											<view style="flex: 1; text-align: right;">30分钟内送达</text>
											</view>
										</view>
										
										<view style="color: #ff9800;">{{item.info}}</view>
										
										<view style="background-color: #ffd281; color: brown; border-radius: 4rpx; width: fit-content;
											padding: 0 8rpx;">{{ item.type || '商家介绍' }}</view>
								
									 </view>
								
									
									
								</view>
								<!--  -->
							</view>
						</scroll-view>	
						</view>
					</view>
					
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				current: 2,
				activeColor: '#007aff',
				historyList: [],
				user:uni.getStorageSync('xm-user'),
				
			}
		},
		onShow(){
			
			// 0 1 2 分别为 前天 昨天 今天
			this.$request.get('/history/selectByDate/'+this.current+"/"+this.user.id).then(res =>{
				this.historyList =  res.data
			})
			
			// 获取当前日期
			const today = new Date();
			
			// 获取昨天的日期
			const yesterday = new Date();
			yesterday.setDate(today.getDate() - 1);
			
			// 获取前天的日期
			const dayBeforeYesterday = new Date();
			dayBeforeYesterday.setDate(today.getDate() - 2);
			
			
			//清空items日期栏
			this.items = []
			this.items.unshift(this.format(today))
			this.items.unshift(this.format(yesterday))
			this.items.unshift(this.format(dayBeforeYesterday))
			
			
			
			
			
			
		},

		methods: {
			 format(date) {
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0');
			  const day = String(date.getDate()).padStart(2, '0');
			  return `${year}-${month}-${day}`;
			},
			onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							
							
								// 0 1 2 分别为 前天 昨天 今天
								this.$request.get('/history/selectByDate/'+this.current+"/"+this.user.id).then(res =>{
									this.historyList =  res.data
								})
							}
						},
			goDetail(businessID,isCollect){
								uni.navigateTo({
									url:"/pages/Detail/Detail?businessId="+businessID+"&isCollect="+isCollect
								})
							},
							
							
		}
	}
</script>

<style>
 .content .historyList {
	 margin: 10px;
	 width: 360px;
	 height: 100vh;
	 background-color: white;
 }
</style>
